<template>
    <div class="box">
        <tab title="首页"></tab>

        <van-tabs v-model:active="active" animated>
            <van-tab title="首页">
                <div style="display: flex;">
                    <router-link to="/home/clas"><van-icon name="bar-chart-o" size="30" /></router-link>
                    <search @click="router.push('/search')" style="flex: 1;"></search>
                    <router-link to="/home/my"><van-icon name="friends-o" size="30" /></router-link>
                </div>
                <!-- 轮播图 -->
                <swipe :title="title"></swipe>
                <!-- 导航组件 -->
                <daohang :list="list"></daohang>
                <!-- 倒计时 -->
                <div style="display: flex;">
                    <p>折扣倒计时：</p>
                    <van-count-down :time="time" @finish="onFinish" />
                </div>

                <van-grid :border="false" :column-num="2" v-if="isShow">
                    <van-grid-item v-for="(v, i) in List" :key="i"
                        :style="i % 2 == 0 ? { height: '23rem' } : { height: '28rem' }" @click="todetail(v.goods_id)">
                        <van-image
                            :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'"
                            :v-lazy="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
                        <div>{{ v.goods_name }}</div>
                    </van-grid-item>
                </van-grid>
                <div style="height: 6rem;"></div>

                <div class="login" v-if="a == '未存'">
                    <p>暂未登录,点击前往登录登录</p>
                    <router-link to="/login">
                        <van-button round type="success" size="small">前往登录</van-button>
                    </router-link>
                    <p @click="closeFun()">X</p>
                </div>
            </van-tab>
            <van-tab title="标签 2">
                <van-grid :border="false" :column-num="2">
                    <van-grid-item v-for="(v, i) in List" :key="i"
                        :style="i % 2 == 0 ? { height: '23rem' } : { height: '28rem' }" @click="todetail(v.goods_id)">
                        <van-image
                            :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'"
                            :v-lazy="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
                        <div>{{ v.goods_name }}</div>
                    </van-grid-item>
                </van-grid>
            </van-tab>
            <van-tab title="标签 3">内容 3</van-tab>
        </van-tabs>
    </div>
</template>

<script setup>
import search from '@/components/search.vue';
import tab from '@/components/tab.vue';
import swipe from '@/components/swipe.vue';
import daohang from '@/components/daohang.vue';
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
import { catitemsApi, swiperdataApi, searchApi } from '@/api/api';
import { ref } from 'vue';

let list = ref([])
const getlist = () => {
    catitemsApi().then((res) => {
        console.log(res);
        list.value = res.data.message
    })
}
getlist()

const time = ref(30 * 1000);
const isShow = ref(true);

const onFinish = () => {
    isShow.value = false
};

let a = ref(localStorage.getItem("a") ? localStorage.getItem("a") : "未存");
const closeFun = () => {
    // isShow1 = false;
    a.value = "已存";
    localStorage.setItem("a", "已存");
};


let title = ref([])
const gettitle = () => {
    swiperdataApi().then((res) => {
        console.log(res);
        title.value = res.data.message
    })
}
gettitle()

let List = ref([])
const getList = () => {
    searchApi().then((res) => {
        console.log(res);
        List.value = res.data.message.goods
    })
}
getList()


const todetail = (id) => {
    router.push({ path: '/detail', query: { id: id } })
}

</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;

    .login {
        width: 90%;
        height: 5rem;
        background: beige;
        border-radius: 1rem;
        position: fixed;
        bottom: 8rem;
        left: 5%;
        display: flex;
        align-items: center;

        p {
            margin: 0 2rem;
        }
    }
}
</style>